<template>
  <el-space class="base-table" direction="vertical">
    <el-table :data="state.list">
      <slot />
    </el-table>

    <el-pagination
      v-model:current-page="query.page"
      v-model:page-size="query.size"
      background
      :total="state.pagination.total"
    />
  </el-space>
</template>

<script lang="ts" setup>
import request from '@/utils/request'
import { reactive, watchEffect } from 'vue'

defineOptions({
  name: 'BaseTable'
})

const props = defineProps<{
  // 接口地址
  apiUrl: string
}>()

const query = reactive({
  page: 1,
  size: 10
})
const state = reactive({
  list: [],
  pagination: {
    page: 1,
    size: 10,
    total: 1
  }
})

async function refresh() {
  const { data } = await request({
    url: props.apiUrl,
    method: 'POST',
    data: query
  })
  state.list = data.list
  state.pagination = data.pagination
}

watchEffect(refresh)
</script>

<style lang="scss" scoped>
.base-table {
  display: block;
}
</style>
